<template>
  <div class="userGroup-manage">
    <!-- 业务搜索框 -->
    <search-block @handleSearch="handleSearch"></search-block>
    <!-- 搜索框和按钮组件 -->
    <operate-button
      :buttonDisplayRange="buttonDisplayRange"
      :multipleSelection="multipleSelection"
      :refSelectType="refSelectType"
      @handleRefSelect="handleRefSelect"
      @handleSearch="handleSearch"
    ></operate-button>
    <div class="pagination-table-container">
      <pagination-table
        :currentPage="currentPage"
        :pageSize="pageSize"
        :pageSizes="pageSizes"
        :tableData="tableData"
        :tableLabel="tableLabel"
        :total="total"
        @changePager="changePager"
        @changeSelection="changeSelection"
        ref="paginationTable"
      ></pagination-table>
    </div>
  </div>
</template>

<script>
import SearchBlock from './components/searchBlock'
import OperateButton from './components/operateButton'
import PaginationTable from '@/components/PaginationTable/index'

export default {
  name: 'UserGroupManage',
  components: {
    SearchBlock,
    OperateButton,
    PaginationTable
  },
  props: {
    refButtonDisplayRange: String,
    refSelectType: String
  },
  mounted() {
    if (this.refButtonDisplayRange) {
      this.buttonDisplayRange = this.refButtonDisplayRange
    }
    this.getTableData()
  },
  data() {
    return {
      buttonDisplayRange: 'manage',
      dataId: null,
      multipleSelection: [],
      dialogFormVisible: false,
      pageSizes: [5, 10, 100],
      // pageSize: 0,
      total: 0,
      tableLabel: [
        { keyword: 'id', keyword_zh: 'id' },
        { keyword: 'title', keyword_zh: '名称' },
        { keyword: 'sort', keyword_zh: '排序' }
      ],
      tableData: [],
      currentPage: 1
    }
  },
  computed: {
    pageSize() {
      return this.pageSizes[0]
    },
    userGroup() {
      return {
        pager: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
      }
    }
  },
  methods: {
    handleRefSelect(multipleSelection) {
      this.multipleSelection = multipleSelection
      this.$emit('userGroupManageSelectData', this.multipleSelection)
    },
    //多选
    changeSelection(val) {
      this.multipleSelection = val
    },
    changePager(pager) {
      this.userGroup.pager = pager
      this.getTableData()
    },
    getTableData() {
      this.$store.dispatch('userGroup/queryForList', this.userGroup).then(res => {
        this.total = res.total
        //格式化部分数据类型
        res.list.forEach(item => {})
        this.tableData = res.list
      })
    },
    handleSearch(searchParams) {
      if (!!searchParams) {
        this.userGroup.title = searchParams.title
      }
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.saearch-block-container {
  padding: 20px;
}
.pagination-table-container {
  padding: 0 20px 20px 20px;
}
.operate-button-container {
  padding: 0 20px 20px 20px;
}
</style>

